<script setup>


</script>

<template>


	<div>
		<!-- position: fixed;top:0px; 顶部定位  用于导航栏 -->
		<div style="border: 1px solid blue;
			position: fixed;top:0px;
			height: 200px;width: 99%;">

			<h2>导航栏</h2>

			<div style="display: flex;
			justify-content: space-between;
			margin-top: 50px;">

				<div>
					<h3>姓名：{{ $store.state.user.name }}</h3>
				</div>

				<div>
					<h3>角色：{{ $store.state.user.rolename }}</h3>
				</div>

				<div><img style="width: 10vw;height: 10vw;margin-top: -50%;"
						v-bind:src=" $ip + '/api/public/showimg/' + $store.state.user.pic " /></div>

				<div><a href="javascript:void(0);" @click="outLogin()">退出</a></div>

			</div>


		</div>



		<div style="display: flex;
					justify-content: space-between;
					margin-top: 200px;
					height: 2000px;
					width: 100%;border: 1px solid red;">

			<router-view></router-view>


		</div>

	</div>


</template>

<script setup>
	import alert from "./components/Alert.vue"
</script>

<script>
	export default {

		data() {

			

		},
		methods: {
			
			outLogin() {  //退出登录

				
				
				this.$store.state.user = {  //清空数据
				name:"",  //姓名
				role:"",  //角色
				pic:"",  //图片id
				rolename:"",  //中文角色	
				}
				console.log("清空数据 == " + this.$store.state.user)

				window.localStorage.setItem("token", "")  //清空 token
				
				this.$router.push("/login")  //返回登录

			}
		},
		mounted() {


			this.$router.push("/login")


		},





	}
</script>


<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>
